const imgs = document.getElementById('imgs')
const length = document.querySelectorAll('#imgs img').length
const prev = document.getElementById('left')
const next = document.getElementById('right')
let idx = 0
let interval = setInterval(run, 2000);

prev.addEventListener('click', () => {
    idx--
    changeImg()
    resetInterval()
})
next.addEventListener('click', () => {
    idx++
    changeImg()
    resetInterval()
})

function run() {
    idx++
    changeImg()
}

function changeImg() {
    if (idx < 0) idx = length - 1
    else if (idx >= length) idx = 0
    imgs.style.transform = `translateX(-${idx * 500}px)`

}
function resetInterval() {
    clearInterval(interval)
    interval = setInterval(run, 2000)
}
